<template>
  <div>
    <!-- 
      App.vue是父组件
      myProduct是子组件
      数据传递：父传子
      1、子组件中，props定义变量并使用
      2、父组件中，标签属性方式给props变量传值
     -->
    <myProduct 
    title="超级好吃的口水鸡" 
    price="50" 
    info="开业大酬宾，全场8折"></myProduct>
    
    <myProduct :title="obj.title" :price="obj.price" :info="obj.info" ></myProduct>
  </div>
</template>

<script>
import myProduct from "./components/myProduct.vue"
export default {
  components: {
    myProduct
  },
  data(){
    return {
      obj: {
        title: "好吃的冰淇淋",
        price: 20,
        info: "开业大酬宾，全场1折"
      }
    }
  }
}
</script>

<style scoped>
h1{
  background-color: skyblue;
}
</style>